import { memo, ReactElement } from "react";
import type { FC } from "react";

import styles from "./index.module.scss";
import Link from "next/link";
import classNames from "classnames";
export interface IProps {
  children?: ReactElement;
}

const Footer: FC<IProps> = memo(function (props) {
  const { children } = props;
  const policy = [
    { id: 0, content: "服务条款", to: "/" },
    { id: 1, content: "隐私政策", to: "/" },
    { id: 2, content: "儿童隐私政策", to: "/" },
    { id: 3, content: "版权投诉指引", to: "/" },
    { id: 4, content: "联系我们", to: "/" },
  ];
  return (
    <div className={styles.container}>
      <div className={classNames(styles.main, "wrapper")}>
        <div className={styles["footer-left"]}>
          {policy.map((item, index) => (
            <Link href={item.to} key={item.id} className={styles.policy}>
              {index !== 0 && <span className={styles.policy}>|</span>}
              {item.content}
            </Link>
          ))}

          <div>
            <a href="">网易公司版权所有©1997-2022</a>
            <a href="">杭州乐读科技有限公司运营：浙网文[2021] 1186-054号</a>
          </div>

          <div>
            <a href="">食品经营许可证</a>
            <a href="">出版物经营许可证</a>
            <a href="">营业执照</a>
            <a href="">网络食品交易第三方平台提供者信息备案: 浙网食A33010041</a>
            <a href="">进口冷链管理承诺书</a>
          </div>
          <div>
            <a href="">粤B2-20090191-18</a>
            <a href="">举报邮箱：工业和信息化部备案管理系统网站</a>
          </div>
        </div>
        <div className={styles["footer-right"]}>
          <a href="" className={styles.icon1}></a>
          <a href="" className={styles.icon2}></a>
          <a href="" className={styles.icon3}></a>
          <a href="" className={styles.icon4}></a>
        </div>
        {children}
      </div>
    </div>
  );
});

export default Footer;
Footer.displayName = "Footer";
